<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="05_Master_Details_With_Edit.aspx.cs" Inherits="_05_Master_Details_With_Edit"
    Title="Untitled Page" %>

<%@ Register Assembly="Flan.Controls" Namespace="Flan.Controls" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
        DisplayAfter="0" DynamicLayout="False">
        <progresstemplate>
            <div style="position: absolute; background-color: White; padding: 2px">
                <img src="../Resources/Images/indicator.gif" />
                Loading...
            </div>
        </progresstemplate>
    </asp:UpdateProgress>
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
        DisplayAfter="0" DynamicLayout="False">
        <progresstemplate>
            <div style="position: absolute; background-color: White; padding: 2px">
                <img src="../Resources/Images/indicator.gif" />
                Loading...
            </div>
        </progresstemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <contenttemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
                CellPadding="4" ForeColor="#333333" DataKeyNames="CustomerId" AllowPaging="True"
                PageSize="10" Font-Names="Verdana" OnRowCommand="GridView1_RowCommand">
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <EditRowStyle BackColor="#999999" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" CommandName="Select"
                                ImageUrl="~/Resources/Images/details_icon.gif" ToolTip="Show Details"/>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                    <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                    <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country] FROM [Customers]">
            </asp:SqlDataSource>
        </contenttemplate>
    </asp:UpdatePanel>
    <!--------------UpdatePanelPopupExtender-------------------------->
    <cc1:UpdatePanelPopupExtender ID="UpdatePanelPopupExtender2" runat="server" TargetControlID="UpdatePanel2"
        OffsetX="0" OffsetY="0" CalloutColor="#7C6F57" CalloutBorderColor="Black" AutoPostBack="True" OnClose="UpdatePanelPopupExtender2_Close" />
    <!--------------UpdatePanelPopupExtender-------------------------->
    <div style="display: none">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <contenttemplate>
            <div id="divClose" class="closeIcon" runat="server">
            </div>
            <asp:DetailsView ID="DetailsView1" runat="server" DataKeyNames="CustomerID" ForeColor="#333333"
                CellPadding="4" DataSourceID="SqlDataSource2" HeaderText="Details" AutoGenerateEditButton="True"
                AutoGenerateRows="False" OnItemUpdated="DetailsView1_ItemUpdated" BorderColor="Gray"
                BorderStyle="Solid" BorderWidth="1px">
                <FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True"></FooterStyle>
                <CommandRowStyle BackColor="#C5BBAF" HorizontalAlign="Left" Font-Bold="True"></CommandRowStyle>
                <EditRowStyle BorderStyle="None"></EditRowStyle>
                <RowStyle BackColor="#E3EAEB"></RowStyle>
                <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center"></PagerStyle>
                <Fields>
                    <asp:BoundField DataField="CompanyName" SortExpression="CompanyName" HeaderText="CompanyName">
                    </asp:BoundField>
                    <asp:BoundField DataField="ContactName" SortExpression="ContactName" HeaderText="ContactName">
                    </asp:BoundField>
                    <asp:BoundField DataField="ContactTitle" SortExpression="ContactTitle" HeaderText="ContactTitle">
                    </asp:BoundField>
                    <asp:BoundField DataField="Address" SortExpression="Address" HeaderText="Address"></asp:BoundField>
                    <asp:BoundField DataField="City" SortExpression="City" HeaderText="City"></asp:BoundField>
                    <asp:BoundField DataField="Region" SortExpression="Region" HeaderText="Region"></asp:BoundField>
                    <asp:BoundField DataField="PostalCode" SortExpression="PostalCode" HeaderText="PostalCode">
                    </asp:BoundField>
                    <asp:BoundField DataField="Country" SortExpression="Country" HeaderText="Country"></asp:BoundField>
                    <asp:BoundField DataField="Phone" SortExpression="Phone" HeaderText="Phone"></asp:BoundField>
                    <asp:BoundField DataField="Fax" SortExpression="Fax" HeaderText="Fax"></asp:BoundField>
                </Fields>
                <FieldHeaderStyle BackColor="#D0D0D0" Font-Bold="True"></FieldHeaderStyle>
                <HeaderStyle BackColor="#7C6F57" ForeColor="White" Font-Bold="True"></HeaderStyle>
                <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
            </asp:DetailsView>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax] FROM [Customers] WHERE ([CustomerID] = @CustomerID)"
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @CustomerID">
                <SelectParameters>
                    <asp:ControlParameter ControlID="GridView1" Name="CustomerID" PropertyName="SelectedValue"
                        Type="String" />
                </SelectParameters>
                <UpdateParameters>
                    <asp:Parameter Name="CompanyName" Type="String" />
                    <asp:Parameter Name="ContactName" Type="String" />
                    <asp:Parameter Name="ContactTitle" Type="String" />
                    <asp:Parameter Name="Address" Type="String" />
                    <asp:Parameter Name="City" Type="String" />
                    <asp:Parameter Name="Region" Type="String" />
                    <asp:Parameter Name="PostalCode" Type="String" />
                    <asp:Parameter Name="Country" Type="String" />
                    <asp:Parameter Name="Phone" Type="String" />
                    <asp:Parameter Name="Fax" Type="String" />
                    <asp:Parameter Name="CustomerID" Type="String" />
                </UpdateParameters>
            </asp:SqlDataSource>
        </contenttemplate>
            <triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger>
        </triggers>
        </asp:UpdatePanel>
    </div>
        <p>
            &nbsp;</p>
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
    <ul>
        <li>The "Details icon" in GridView1 is an ImageButton with CommandName="Select".</li>
        <li>UpdatePanel1 has its ChildrenAsTriggers="False" and UpdateMode is "conditional".
            It is refreshed only if an action other than the "Select" command (ImageButton)
            is fired. We don't need to refresh UpdatePanel1 when the "Select" command fires
            because nothing visually changes in UpdatePanel1.</li>
        <li>UpdatePanel2 is set to refresh anytime the SelectedIndex of GridView1 changes</li>
        <li>UpdatePanel1 is refreshed
            when the DetailsView ItemUpdated event is fired.</li>
        <li>AutoPostBack is set to true on the PopupExtender and the "Close" event is handled
            in code behind. This is raised anytime the UpdatePanel is hidden (Document body
            click or "Close" icon click)</li>
    </ul>
</asp:Content>
